<template>
  <div>
    <Echart
      ref="echart"
      :options="options"
      id="bottomLeftChart"
      :height="height"
      width="100%"
    ></Echart>
  </div>
</template>

<script>
import Echart from "../echart/index.vue";
import ChartsMixins from "@/utils/newJs/chartsMixins";
export default {
  mixins: [ChartsMixins],
  data() {
    return {
      options: {},
    };
  },
  components: {
    Echart,
  },
  props: {
    kLineChartInfo: {
      type: Object,
      default: () => ({}),
    },
    height: String,
    index: { Number },
  },
  watch: {
    kLineChartInfo: {
      handler(newData) {
        // console.log(newData, "++++++++");
        //显示个数
        let ZoomNum = 6;
        if (newData.ZoomNum != undefined) {
          ZoomNum = newData.ZoomNum[this.index];
        }
        //图例位置
        let legenLeft = "center";
        if (
          newData.legenLeft != undefined &&
          newData.legenLeft[this.index] != undefined
        ) {
          legenLeft = newData.legenLeft[this.index];
        }
        //图到顶端的距离
        let gridTop = "28%";
        if (newData.gridTop != undefined) {
          gridTop = newData.gridTop[this.index];
        }
        //页面2,x轴数据倾斜
        let Xrotate = "0";
        if (newData.Xrotate != undefined) {
          Xrotate = newData.Xrotate[this.index];
        }
        this.options = {
          color: newData.color[this.index],
          title: {
            text: newData.title[this.index],
            top: "4%",
            left: "10px",
            textStyle: {
              color: "rgb(60, 229, 199)",
            },
          },
          tooltip: {
            trigger: "axis",
            axisPointer: {
              type: "cross",
            },
            formatter: function (params) {
              var data = params[0].data; // 当前数据项
              var tooltipContent =
                '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
                params[0].color +
                '"></span>' +
                params[0].seriesName +
                "<br/>" +
                "max：" +
                data[3] +
                "<br/>" +
                "3/4值：" +
                data[1] +
                "<br/>" +
                "1/4值：" +
                data[2] +
                "<br/>" +
                "min：" +
                data[4] +
                "<br/>" +
                '<span style="display:inline-block;margin-right:5px;border-radius:20px;width:10px;height:10px;background-color:' +
                params[1].color +
                '"></span>' +
                params[1].seriesName +
                ":" +
                params[1].data;
              return tooltipContent;
            },
          },
          grid: {
            left: "3%",
            right: "3%",
            bottom: "4%",
            top: gridTop,
            containLabel: true,
          },
          legend: {
            type: "scroll",
            left: legenLeft,
            top: "4%",
            data: newData.legendData[this.index],
            textStyle: {
              color: "#000",
              fontSize: this.transformFontSize(14),
            },
            itemHeight: this.transformFontSize(14),
            itemWidth: this.transformFontSize(20),
          },
          xAxis: {
            type: "category",
            data: newData.xData[this.index],
            axisLabel: {
              show: true,
              rotate: Xrotate,
              textStyle: {
                color: "#000",
                fontSize: this.transformFontSize(12),
              },
              formatter: function (value, index) {
                if (value.split("-").length == 3) {
                  return value.split("-")[1] + "/" + value.split("-")[2];
                } else {
                  return value;
                }
              },
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: true,
            },
            // boundaryGap: false,
          },
          yAxis: {
            name: `${newData.tooltipFormatter[this.index]}`,
            type: "value",
            // interval: 10,
            splitLine: {
              show: true, // 显示间隔线
              lineStyle: {
                color: "#ddd", // 线条颜色
                type: "dashed", // 线条类型，这里是虚线
              },
            },
            axisLabel: {
              show: true,
              textStyle: {
                color: "#000",
                fontSize: this.transformFontSize(14),
              },
            },
            axisLine: {
              symbol: [
                "none",
                "path://M5,20 L5,5 L8,8 L5,2 L2,8 L5,5 L5.3,6 L5.3,20 ",
              ],
              symbolSize: [32, 30], //箭头的宽高
              symbolOffset: 0, //箭头距离x轴末端距离
              show: true,
              lineStyle: {
                color: "#000",
              },
            },
            axisTick: {
              show: true,
            },
          },
          dataZoom: [
            {
              type: "slider",
              show: true,
              start: 100 - (ZoomNum / newData.xData[this.index].length) * 100, //默认为0
              end: 100, //默认为100
              // startValue: 50, // 从头开始
              endValue: ZoomNum, // 一次性展示
              xAxisIndex: [0],
              // handleSize: 0, //滑动条的 左右2个滑动条的大小
              height: 0, //组件高度
              bottom: 12,
              borderColor: "#e3e3e3",
              fillerColor: "#409EFF", // 选中范围的填充颜色
              borderRadius: 10,
              backgroundColor: "#000", //两边未选中的滑动条区域的颜色
              showDataShadow: false, //是否显示数据阴影 默认auto
              showDetail: false, //拖拽时候是否显示详细数值信息
              realtime: true, //是否实时更新
              filterMode: "filter", //y轴范围自适应
              // zlevel: 10,
              show: true,
            },
            //鼠标滚动
            {
              type: "inside",

              xAxisIndex: [0],

              zoomOnMouseWheel: false, //滚轮不触发缩放

              moveOnMouseMove: true, //鼠标移动触发平移

              moveOnMouseWheel: true, //鼠标滚轮触发平移
            },
          ],
          series: newData.series[this.index],
        };
      },
      // immediate: true,
      deep: true,
    },
  },
  mounted() {},
  methods: {},
};
</script>